<template>
  <div>
    <a-form-item
      label="题目"
      :field="'topic.' + index + '.title'"
      :rules="{
        required: true,
        message: '题目内容不能为空',
      }"
    >
      <a-input v-model="topic.title" placeholder="请输入题目内容" />
    </a-form-item>
    <a-form-item label="题目说明">
      <a-input v-model="topic.desc" placeholder="请输入题目说明，可以为空" />
    </a-form-item>
    <div
      v-for="(option, optionIndex) in topic.options"
      :key="optionIndex"
      class="option-item"
    >
      <a-row :gutter="22">
        <a-col :span="18">
          <a-form-item
            :label="`选项${optionIndex + 1}`"
            :field="'topic.' + index + '.options.' + optionIndex + '.value'"
            :rules="{ required: true, message: '选项内容不能为空' }"
          >
            <a-input v-model="option.value" placeholder="请输入选项内容" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-space>
            <a-button type="primary" @click="addOption(index)">
              <template #icon>
                <icon-plus />
              </template>
            </a-button>
            <a-button type="primary" @click="delOption(index, optionIndex)">
              <template #icon>
                <icon-delete />
              </template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="18">
          <a-form-item
            label="描述"
            :field="'topic.' + index + '.options.' + optionIndex + '.desc'"
          >
            <a-input v-model="option.desc" placeholder="请输入描述" />
          </a-form-item>
        </a-col>
      </a-row>
    </div>
    <a-form-item
      label="必填项"
      :field="'topic.' + index + '.isRequired'"
      :rules="{
        type: 'boolean',
        required: true,
        message: '请选择是否为必填项',
      }"
    >
      <div class="option-addtion">
        <a-switch
          v-model="topic.isRequired"
          active-text="是"
          inactive-text="否"
        />
      </div>
    </a-form-item>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';

  const emit = defineEmits(['update:data', 'addOption', 'delOption']);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    index: {
      type: Number,
      default: 0,
    },
  });
  const topic = ref(props.data);

  watch(topic.value, (value) => {
    emit('update:data', value);
  });

  const addOption = (index: number) => {
    emit('addOption', {
      index,
    });
  };

  const delOption = (index: number, optionIndex: number) => {
    emit('delOption', {
      index,
      optionIndex,
    });
  };
</script>

<style lang="scss" scoped>
  .option-item {
    width: 100%;
    padding-left: 10%;
  }
</style>
